/// <reference path="_variables-shared.scss" />
/// <reference path="_mixins.scss" />
/// <reference path="../bs4/scss/bootstrap.scss" />


//
// Bidi
// --------------------------------------------------

[dir=rtl] {
	direction: rtl;
	text-align: right;

	body {
		text-align: right;
	}

	// Opposite/mixed
	[dir=ltr] {
		direction: ltr;
		// INFO: "right" is correct!
		text-align: right;
	}
}


//
// Grid stuff
// --------------------------------------------------

.sm-gutters {
	$gw: 0.5rem;
	margin-right: $gw * -1;
	margin-left: $gw * -1;

	> .col, 
	> [class*="col-"] {
		padding-right: $gw;
		padding-left: $gw;
	}
}

.xs-gutters {
	$gw: 0.25rem;
	margin-right: $gw * -1;
	margin-left: $gw * -1;

	> .col, 
	> [class*="col-"] {
		padding-right: $gw;
		padding-left: $gw;
	}
}

.container-fluid {
	padding-left: 6%;
	padding-right: 6%;
}


//
// Count badge
// --------------------------------------------------

.has-count[data-count]:after {
	content: "(" attr(data-count) ")";
	position: relative;
	display: inline-block;
	opacity: 0.6;
	padding-left: 0.2rem;
	font-weight: 400;
}


//
// Icon margins
// ------------------------------------------------------

.btn,
.nav-link,
.menubar-link {
	> i + span:not(:empty),
	> i + em:not(:empty) {
		padding-left: 0.5em;
	}

	> span:not(:empty) + i,
	> em:not(:empty) + i {
		margin-left: 0.5em;
	}
}


// Data binding 3d rotate
// ------------------------------------------------------

@keyframes data-binding {
	0% {
		transform: rotateY(0deg);
	}

	50% {
		transform: rotateY(180deg);
		color: transparent;
	}

	100% {
		transform: rotateY(360deg);
	}
}

.data-binding {
	animation: data-binding 0.5s ease-in-out;
}


//
// Fontastic utils (ensure crisp icons with 20/40...px)
// ------------------------------------------------------

.icm {
	font-size: 20px;
	display: inline-block;
}

.icm-2x {
	font-size: 40px;
}

.icm-3x {
	font-size: 60px;
}

.icm-4x {
	font-size: 80px;
}

.icm-5x {
	font-size: 100px;
}


// Imaging
// ------------------------------------------------------

.img-center-container {
	display: block;
	position: relative;
	height: 0;
	width: 100%;
	padding-top: 100%;
	text-decoration: none !important;
	outline: none !important;

	> img {
		position: absolute;
		max-width: 100%;
		max-height: 100%;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
}

// apply img-fluid to all images within html editor content
.html-editor-content img {
	max-width: 100%;
	// TBD: WATCH!!!!
	height: auto !important;
}

.fit-fill       { object-fit: fill; }
.fit-contain    { object-fit: contain; }
.fit-cover      { object-fit: cover; }
.fit-scale-down { object-fit: scale-down; }
.fit-none       { object-fit: none; }

//
// Bootstrap overrides and tweaks
// --------------------------------------------------

.dropdown .badge {
	font-size: $font-size-xs;
}

.dropdown-item {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.popover-title {
	padding-top: 1rem;
	padding-bottom: 1rem;
	font-weight: $font-weight-medium;
}

.tooltip {
	font-size: $font-size-sm;
}

.badge {
	border: 1px solid #fff;
}

.badge:not(.badge-pill) {
	border-radius: $border-radius-sm;
}

table th {
	font-weight: $font-weight-medium;
}


//
// Bootstrap additions
// --------------------------------------------------

.embed-responsive-16by10 {
    &::before {
        padding-top: percentage(10 / 16);
    }
}


//
// Bootstrap List group tweaks
// ------------------------------------------------------

.list-group {
	.list-group-item {
		overflow: hidden;
	}

	.list-group-item.active {
		&:before {
			@include active-list-item($size: 3px);
		}
	}

	&.has-icons {
		.list-group-item {
			display: inline-flex;
			align-items: baseline;
		}

		.list-group-item-icon {
			margin-right: 0.75rem;
		}
	}
}


//
// Extra border utils
// ------------------------------------------------------

.border-translucent {
    border-color: rgba(#000, 0.12) !important;
}

.rounded-sm {
    border-radius: $border-radius-sm !important;
}

.rounded-lg {
    border-radius: $border-radius-lg !important;
}

.rounded-xl {
    border-radius: $border-radius-lg * 2 !important;
}


// Extra color utils
// ------------------------------------------------------

@each $g, $value in $grays {
    .bg-gray-#{$g} {
        background-color: $value !important;
    }

    .text-gray-#{$g} {
        color: $value !important;
    }
}


//
// Some shims
// ------------------------------------------------------

.hide {
	display: none;
}

.muted {
	@extend .text-muted;
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes fadeInDown {
    from  { opacity: 0; transform: translate3d(0, -20px, 0); }
    to    { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeOutLeft {
    from  { opacity: 1; }
    to    { opacity: 0; transform: translate3d(-20px, 0, 0); }
}

@keyframes fadeOutRight {
    from  { opacity: 1; }
    to    { opacity: 0; transform: translate3d(20px, 0, 0); }
}

.fadeOutLeft    { animation-name: fadeOutLeft; }
.fadeOutRight   { animation-name: fadeOutRight; }
.fadeInDown     { animation-name: fadeInDown; }

//
// Profiler sucks on small screens
// ------------------------------------------------------

@include media-breakpoint-down(sm) {
	.profiler-results {
		display: none !important;
	}
}


// JQUERY UI STUFF
// -------------------------

.ui-effects-transfer,
.transfer {
	border: 2px dotted $gray-700 !important;
	background: transparent;
	z-index: 100000;
}


// Sizing
// -------------------------

.h-medium     { min-height: 400px; }
.h-tall       { min-height: 700px; }

@each $breakpoint in (sm, md, lg, xl) {
    @include media-breakpoint-up($breakpoint) {
        .h-#{$breakpoint}-medium     { min-height: 400px; }
        .h-#{$breakpoint}-tall       { min-height: 700px; }
    }
}


//
// Flip
// --------------------------------------------------

.flip-h {
    transform: scale(-1, 1) !important;
}

.flip-v {
    transform: scale(1, -1) !important;
}

.flip-hv {
    transform: scale(-1, -1) !important;
}


// Parallax stuff
// ------------------------------------------------------

.parallax[data-parallax-type=content] {
    will-change: transform;
}


// Animations
// ------------------------------------------------------

body.no-anims * {
    transition-property: none !important;
    transform: none !important;
    animation: none !important;
}


// Misc utils
// -------------------------

.last-mb-0:last-child {
	margin-bottom: 0 !important;
}